<template>
  <div class="music-item">
    <div class="song-list">
      <ul>
        <li v-for="(item,index) in songs" :key="item.id" @click="selectItem(index)">
          <h2>
             <span class="name">{{item.name}}</span>
             <span class="icon-add" @click.stop="addSong(item)"></span>
          </h2>
          <p class="singer-name">
            <span v-for="list of item.singer" :key="list.id">{{list.name}}</span>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  props: {
    songs: {
      type: Array
    }
  },
  methods: {
    ...mapMutations(['setCurrentIndex', 'setPlayList', 'setSequenceList', 'setFullScreen', 'setSongItem']),
    // 点击歌曲进行播放
    selectItem (index) {
      this.setCurrentIndex(index) // 传递当前播放歌曲索引
      this.setPlayList(this.songs) // 传递当前播放歌曲列表
      this.setSequenceList(this.songs) // 传递顺序播放列表
      this.setFullScreen(true) // 传递当前播放歌曲列表
    },
    addSong (item) {
      this.setSongItem(item)
    },
    isPlayList (item) {
      // 判断播放列表中是否包含这首歌
      const index = this.playList.findIndex(list => {
        return list.mid === item.mid
      })
      return index
    }
  },
  computed: {
    ...mapState(['playList', 'sequenceList'])
  }
}
</script>

<style lang="stylus">
@import '../../common/stylus/variable.styl'
.song-list {
  ul {
    padding:10px 0;
    li {
      display: flex;
      flex-direction: column;
      padding-bottom: 10px;
      h2 {
        display: flex;
        justify-content: space-between;
        line-height:20px;
        .name {
          flex: 1;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .icon-add {
          font-size: $font-size-small;
        }
      }
      p {
        color: $color-text-d;
        line-height: 30px;
        font-size: $font-size-small;
        span {
          margin-right: 5px;
        }
      }
      .singer-name {
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
